<template>
    <div class="SetinfoImglist">
        <flexbox :gutter="0" wrap="wrap">
            <flexbox-item :span="2/3">
                <div class="flex-cover" >

                    <croppa v-model="myCroppa" 
                            ref="croppa"
                            class="itemImg"
                            :prevent-white-space="true"
                            :show-remove-button="this.imglist.cover?false:true"
                            placeholder="请上传图片"
                            @file-choose="handleCroppaFileChoose"
                            @new-image="handleNewImage"
                            
                    >
                        <img slot="initial" :src="this.imglist.cover"/>
                    </croppa>
                    
                    <div class="img-masker" @click="handleItemImgClick" v-show="this.showHideOnBlur">
                        <div>
                            <x-dialog v-model="showHideOnBlur" class="dialog-demo" :mask-z-index="1000" :dialog-style="{'max-width': '100%', width: '100%', height: '30%', 'background-color': 'transparent'}">
                                <p style="color:#fff;text-align:center;">
                                    <span style="font-size:.5rem" @click.stop="handleItemImgReset">重新上传</span>
                                    <br> <br> <br>
                                    <x-icon type="ios-close-outline" style="fill:#fff;" @click.stop="handleItemImgCancel"></x-icon>
                                </p>
                                
                            </x-dialog>
                        </div>
                    </div>

                    <div class="croppaUpload" v-show="!this.showHideOnBlur">
                        <flexbox>
                            <flexbox-item><div class="croppaOperating" @click="handleUploadClick">确定</div></flexbox-item>
                            <flexbox-item><div class="croppaOperating" @click="handleUploadCancel">取消</div></flexbox-item>
                        </flexbox>
                    </div>

                </div>
            </flexbox-item>

            <flexbox-item :span="1/3">
                <div class="flex-double">

                    <div 
                        class="flex-item" 
                        v-for="(item,index) of this.album_top"
                        :key="index"
                    >
                        <div
                            class="itemImg"
                            :style="
                                {backgroundImage: 'url('+ item + ')'}
                            "
                            @click="handleItemClick"
                        >
                            
                        </div>
                    </div>
                </div>
            </flexbox-item>

            <flexbox-item 
                :span="1/3"
                v-for="(item,index) of this.album_bottom"
                :key="index"
            >
                <div class="flex-item" >
                    <div
                        class="itemImg"
                        :style="
                            {backgroundImage: 'url('+ item + ')'}
                        "
                        @click="handleItemClick"
                    >
                    </div>
                </div>
            </flexbox-item>

        </flexbox>
    </div>
</template>

<script>
import { Flexbox, FlexboxItem, Toast, XDialog, TransferDomDirective as TransferDom  } from 'vux'
import axios from 'axios'
import OSS from 'ali-oss'
import { mapState } from 'vuex'

/*
 1. 封面上传逻辑
    封面是否存在 存在就提示是否需要重新上传 不存在调用上传函数
 2. 其余相册上传逻辑
    随机点一个可以触发上传相册函数
    上传函数 首先获取可以上传几张 然后写上传限制几张 通过回调函数一张张显示

*/

export default {
    name: 'SetinfoImglist',
    directives: {
        TransferDom
    },
    components: {
        Flexbox,
        FlexboxItem,
        Toast,
        XDialog
    },
    data () {
        return {
            imglist: {
                cover: 'https://goss.veer.com/creative/vcg/veer/800water/veer-159132220.jpg',
                album: [
                    'https://goss.veer.com/creative/vcg/veer/800water/veer-133331298.jpg',
                    'https://goss.veer.com/creative/vcg/veer/800water/veer-133331298.jpg',
                    'https://goss.veer.com/creative/vcg/veer/800water/veer-133331298.jpg',
                    'https://goss.veer.com/creative/vcg/veer/800water/veer-133331298.jpg',
                    'https://goss.veer.com/creative/vcg/veer/800water/veer-133331298.jpg',
                    'https://goss.veer.com/creative/vcg/veer/800water/veer-133331298.jpg',
                ]
            },
            showPositionValue: true,

            region: 'oss-cn-shenzhen',
            bucket: 'rjinxtestbucket',
            id: 'upload',
            percentage: 0,
            url:'',
            urls:[],
            getToken:{
                sign:'',
            },
            myCroppa: {},
            showHideOnBlur: false,
            
        }
    },
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        }),
        cover () {
            return this.imglist.cover != ''? this.imglist.cover : ''
        },
        album_top () {
            // console.log(this.imglist.album.length)
            let arr = []
            for(let i = 0;i < 2;i++){
                if(this.imglist.album[i]){
                    arr[i] = this.imglist.album[i]
                }else{
                    arr[i] = ''
                }
            }
            return arr
        },
        album_bottom () {
            // console.log(this.imglist.album.length)
            let arr = []
            for(let i = 0;i < 6;i++){
                if(this.imglist.album[i+2]){
                    arr[i] = this.imglist.album[i+2]
                }else{
                    arr[i] = 'https://goss.veer.com/creative/vcg/veer/612/veer-140698100.jpg'
                }
            }
            return arr
        }
    },
    mounted () {
        //将canvas撑开
        document.querySelector('canvas').style.width = '100%'
        document.querySelector('canvas').style.height = '100%'
        //赋值showHideOnBlur 如果已经有封面就赋值true 没有就false
        this.showHideOnBlur = this.imglist.cover?true:false
    },
    methods: {
        //上传函数
        doUpload () {
            const _this = this
            const urls = []
            // console.log(this.myCroppa)
            this.myCroppa.generateBlob((blob)=>{
                axios.get('http://wxx.qipigou.com/api/Oss/getOss',{}).then((result) => {
                    // console.log(result)
                    let data = result.data.Credentials
                    const client = new OSS({
                        region: _this.region,
                        accessKeyId: data.AccessKeyId,
                        accessKeySecret:data.AccessKeySecret,
                        stsToken: data.SecurityToken,
                        bucket: _this.bucket
                    })
                    //随机名字  cover 
                    let random_name ='cover/'+this.userInfo.userid+'/' + new Date().getTime() + '.jpg'
                    client.multipartUpload(random_name,blob,{
                        //显示正在上传中
                    }).then((result)=>{
                        const res = result.res
                        if(res.statusCode === 200){
                            //将确定和取消按钮隐藏 发一条数据到后台已经上传成功

                        }
                        console.log(result)
                    })
                })
                
            })
            

        },
        handleItemImgClick () {
            if(this.imglist.cover != ''){
                this.showHideOnBlur = true
            }else{
                this.$refs.croppa.chooseFile()
            }
            
        },
        handleItemImgCancel () {
            this.showHideOnBlur = false
        },
        handleItemImgReset () {
            this.$refs.croppa.chooseFile()
        },
        //点击新图片的回调函数
        handleCroppaFileChoose () {
            this.showHideOnBlur = false
        },
        //有新图片之后的回调函数
        handleNewImage () {
            this.showHideOnBlur = false
        },
        handleItemClick () {
            //判断是否存在照片  
        },
        //用户设置新图片之后的确定按钮
        handleUploadClick () {
            //获取图片地址
            this.doUpload()
            console.log('asd')
        },
        //用户设置新图片之后的取消按钮
        handleUploadCancel () {
            console.log('zxc')
        }
    }
}
</script>

<style lang="stylus" scoped>
    .img-masker >>> .weui-mask
        position: absolute
    .img-masker >>> .weui-dialog
        position: absolute

    .flex-item
        width: 100%
        height: 2.5rem
        padding: 0.05rem
        box-sizing: border-box
    .itemImg
        background-repeat: no-repeat
        background-position:center
        background-size: cover
        height: 100%
        width: 100%
    .SetinfoImglist
        padding: 0.05rem
        background-color: #fff
        box-sizing: border-box
        .flex-cover
            width: 100%
            height: 5rem
            padding: 0.05rem
            box-sizing: border-box
            position: relative
            .img-masker
                position:absolute
                top: 0
                left: 0
                right: 0
                bottom: 0
                .boxButton
                    height: 1rem
                    .boxButtonReup
                        padding: .2rem
                        background-color: #999
            .croppaUpload
                height: .8rem
                background-color: rgba(0,0,0,0.3)
                position:absolute
                left: 0
                right: 0
                bottom: 0
                margin: 0 0.05rem 0.05rem 0.05rem
                .croppaOperating
                    height: 100%
                    text-align: center
                    line-height: .8rem
                    color: #fff
        .flex-double
            height: 5rem
    
</style>


